<template>
  <a-button v-if="!isEdit" class="margin-bottom20" type="primary" @click="edit">编辑</a-button>
  <template v-else>
    <a-button class="margin-bottom20 margin-right16" @click="cancel">取消</a-button>
    <a-button class="margin-bottom20" type="primary" @click="save">保存</a-button>
    <a-button class="margin-left20" type="primary" @click="getFormValuesValidate">校验并获取表单值</a-button>
  </template>
  <view-edit
    ref="viewEditRef"
    :grid="3"
    :isEdit="isEdit"
    :configJsonArr="configJsonArr"
    :baseData="baseData"
  >

  </view-edit>
</template>

<script setup>
import { ref, watch } from 'vue'
import ViewEdit from 'components/ViewEdit'
const configJsonArr = ref([
  {
    label: '操作人',
    name: 'user',
    changeFromItem: false,//编辑时依旧是详情文本形式
    props: {
      allowClear: true,
      placeholder: '请输入部门名称',
      style: 'width: 320px;',
    }
  },
  {
    type: 'a-input',
    label: '部门名称',
    name: 'input1',
    props: {
      allowClear: true,
      placeholder: '请输入部门名称',
      style: 'width: 320px;',
    }
  },
  {
    type: 'a-select',
    label: '部门主管',
    name: 'select1',
    props: {
      allowClear: true,
      placeholder: '请选择',
      style: 'width: 320px;',
      options: [
        {
          label:"马大哈",
          value: 1
        },
        {
          label:"李小虾",
          value: 2
        },
        {
          label:"刘大虾",
          value: '刘大虾'
        },
      ],
    }
  },
])
const baseData = ref({
  input1: '技术中心',
  select1: 1,
  user: '张三'
})
const isEdit = ref(false)
const viewEditRef = ref()
  // 点击保存
  const save = async(index)=> {
    // 获取值
    let res = await viewEditRef.value.getAllValues(true)

    if(res) {
      console.log(res,"---res表单值-----");
      isEdit.value = false
    }
  }
  // 点击取消
  const cancel = (index)=> {
    isEdit.value = false
    viewEditRef.value.showOriginFormState()
  }
  // 点击编辑
  const edit = (index)=> {
    isEdit.value = true
  }
  // 获取表单值
  const getFormValuesValidate = async()=> {
    let res = await viewEditRef.value.getAllValues(true)
    console.log(res,"------校验获取表单值----");
  }
</script>

<style lang="less" scoped>

</style>
